<script setup>
const props = defineProps({
  beforeColor: {
    type: String,
    default: "#409eff",
  },
  text: String,
});
</script>
<template>
  <div class="border-left" :style="{ '--before-color': beforeColor }">
    {{ text }}
  </div>
</template>

<style scoped>
.border-left::before {
  transition: 0.5s;
  transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  background: var(--before-color);
  opacity: 0.7;
  border-radius: 4px;
  bottom: 0;
  content: "";
  display: block;
  height: 10px;
  left: 10px;
  position: absolute;
  width: 50px;
  z-index: 1;
}
.border-left {
  position: relative;

  font-weight: 300;
  text-align: start;

  font-size: 1.2rem;
}
</style>
